import * as React from "react";
import { debounce } from "lodash";
import { ILabelValue } from "typesPath/base-types";
import { searchProps } from "constants/table";
import { Select, Tooltip } from "antd";

interface IAttars {
  mode?: "multiple" | "tags";
  placeholder?: string;
}

interface ISelectProps {
  onChange?: (result: string[] | string) => any;
  value?: string[] | string;
  isDisabled?: boolean;
  attrs?: IAttars;
  getData: () => any;
  refetchData?: boolean; // 有些页面通过store拿数据需要二次更新
}
export class VirtualScrollSelect extends React.Component<ISelectProps> {
  public state = {
    optionsData: [] as ILabelValue[],
    scrollPage: 0,
    keyword: "",
    total: 0,
    refetchData: false,
  };

  public componentDidMount() {
    this.getData();
  }

  public getData = async () => {
    const { getData } = this.props;
    if (!getData) return;
    const pageSize = this.state.scrollPage;
    let originData = await getData();

    if (originData) {
      originData = this.state.keyword ? originData.filter((item: any) => item.label.includes(this.state.keyword)) : originData;
      let data = [].concat(originData);
      // tslint:disable-next-line:no-bitwise
      const total = data.length ? (data.length / 30) | 1 : 0;
      data = data.splice(pageSize * 30, 30); // 每页展示30条数据

      return this.setState({
        optionsData: data,
        total,
        refetchData: false,
      });
    }
  };

  public handleSearch = (e: string) => {
    debounce(() => {
      this.setState(
        {
          keyword: e.trim(),
          scrollPage: 0,
        },
        () => {
          this.getData();
        }
      );
    }, 300)();
  };

  public handleSelectScroll = (e: any) => {
    e.persist();
    const { target } = e;
    const { scrollPage } = this.state;
    debounce(() => {
      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
        const nextScrollPage = scrollPage + 1;
        if (this.state.total <= nextScrollPage) {
          // 已全部拉取
          return;
        }
        this.setState(
          {
            scrollPage: nextScrollPage,
          },
          () => {
            this.getData();
          }
        );
      }
      if (target.scrollTop === 0 && scrollPage !== 0) {
        // 往上滚且不是第一页
        const nextScrollPage = scrollPage - 1;
        this.setState(
          {
            scrollPage: nextScrollPage,
          },
          () => {
            this.getData();
          }
        );
      }
    }, 200)();
  };

  public render() {
    // tslint:disable-next-line:prefer-const
    let { value, isDisabled, attrs } = this.props;
    if (attrs && (attrs.mode === "multiple" || attrs.mode === "tags")) {
      value = value || [];
    }
    return (
      <>
        <Select
          {...attrs}
          defaultValue={value}
          value={value}
          onChange={this.props.onChange}
          onSearch={this.handleSearch}
          disabled={isDisabled}
          onPopupScroll={this.handleSelectScroll}
          {...searchProps}
        >
          {this.state.optionsData.map((d: ILabelValue) => (
            <Select.Option value={d.value} key={d.value} disabled={d.disabled}>
              {d.label.length > 25 ? (
                <Tooltip placement="bottomLeft" title={d.label}>
                  {d.label.substring(0, 25) + "..."}
                </Tooltip>
              ) : (
                d.label
              )}
            </Select.Option>
          ))}
        </Select>
      </>
    );
  }
}
